<template>
  <div>
    <el-container style="background: #F8FAFC;">
      <el-aside width="200px" style="background: #FFFFFF; border: 1px solid #F1F1F1; position: fixed; height: 1600px;">
        <div style="width: 100%;height: 100px; text-align: center;">
         <div style="padding-top: 20px;">
           <div style="font-size: 30px; color: #409EFF">
             Maixy
           </div>
           <div style="color: #99a9bf">
             运维管理后台
           </div>
         </div>
        </div>
        <el-menu
          :default-active="this.$global.getTabIndex()">
          <el-menu-item index="1" @click="toActivityHouse()">
            <i class="el-icon-menu"></i>
            <span slot="title">课程管理</span>
          </el-menu-item>
          <el-menu-item index="2" @click="toMoment()">
            <i class="el-icon-s-claim"></i>
            <span slot="title">打卡管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="toUser">
            <i class="el-icon-s-order"></i>
            <span slot="title">用户信息</span>
          </el-menu-item>
          <el-menu-item index="4" @click="toManager">
            <i class="el-icon-s-custom"></i>
            <span slot="title">后台人员</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="margin-left: 200px;">
        <el-header style="font-size: 16px;height: 100px;background: #FFFFFF;border: 1px solid #F1F1F1;">
          <div>
            <div style="float: left;margin-top: 27px; margin-left: 20px;">
              <el-avatar :size="50" :src="this.$global.mediaHost + this.$global.getUser().avatarUrl"></el-avatar>
            </div>

            <div style="float: left; margin-top: 46px; margin-left: 10px;">
              {{ this.$global.getUser().nickName }}
            </div>

            <div v-if="this.$global.managerBasisInfoView.type === 1 " style="float: left; margin-top: 46px; margin-left: 10px; width: 100px;height: 20px; background: #F56C6C;border-radius: 6px;text-align: center;color: #FFFFFF;">
              超级管理员
            </div>
            <div v-else style="float: left; margin-top: 46px; margin-left: 10px; width: 100px;height: 20px;background: #14C19B;border-radius: 6px;text-align: center;color: #FFFFFF">
              普通管理员
            </div>

            <div style="float: left; margin-top: 38px; margin-left: 10px;">
              <el-popover
                placement="top-start"
                title="提示"
                width="200"
                trigger="hover"
                content="这里显示的统计数据可能不是实时的，如果对数据感到疑惑，请强制刷新一下您的页面就会得到最新的数据。">
                <el-button slot="reference" type="text"><i class="el-icon-info"></i></el-button>
              </el-popover>
            </div>


            <div style="float: right; margin-top: 46px;">
              <el-dropdown style="font-size: 16px;">
                <i class="el-icon-setting"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout()">注 销</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

        </el-header>
        <el-main
          style="background: #FFFFFF;border: 1px solid #F1F1F1; margin-top: 50px; margin-left: 40px; margin-right: 40px;">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "HomePage",
  data() {
    return {
      paramsData: {}
    }
  },
  methods: {
    logout: function () {
      this.$global.removeTeamId()
      this.$global.removeUser()
      this.$router.push({path: "/login"})
      this.$global.setTabIndex(1)
    },
    toActivityHouse: function () {
      this.$global.setTabIndex(1)
      this.$router.push({path: '/homePage/activity'})
    },
    toMoment: function () {
      this.$global.setTabIndex(2)
      this.$router.push({path: '/homePage/moment'})
    },
    toUser: function () {
      this.$global.setTabIndex(3)
      this.$router.push({path: '/homePage/user'})
    },
    toManager: function () {
      this.$global.setTabIndex(4)
      this.$router.push({path: '/homePage/manager'})
    },
    /**
     * 我的基本信息
     */
    getManagerBasisInfo: function () {
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/manager/getManagerBasisInfo',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.$global.managerBasisInfoView = responseData.managerBasisInfoView;
          this.$forceUpdate()
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.getManagerBasisInfo()
  }
}
</script>

<style scoped>
</style>
